/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-native/no-inline-styles */
import React, {useMemo} from 'react';
import {ImageBackground} from 'react-native';
import {Colors} from 'react-native-ui-lib';
import * as Animatable from 'react-native-animatable';

let Logo = ({status, appTheme, size = 'default'}) => {
  const sizes = {
    width: size === 'small' ? 46 : size === 'default' ? 60 : 90,
    height: size === 'small' ? 46 : size === 'default' ? 58 : 88,
  };

  const pos = {
    width: size === 'small' ? 7 : size === 'default' ? 10 : 14,
    height: size === 'small' ? 7 : size === 'default' ? 10 : 14,
    borderRadius: size === 'small' ? 2 : size === 'default' ? 3 : 4,
    marginTop: size === 'small' ? 3 : size === 'default' ? 4 : 6,
    marginLeft: size === 'small' ? -32 : size === 'default' ? -45 : -60,
  };

  let avatar = {
      style: {
        ...sizes,
        alignItems: 'center',
      },
      source:
        appTheme === 'light'
          ? require('@/assets/logos.png')
          : require('@/assets/logos_w.png'),
    },
    state = {
      loading: {
        from: {
          rotate: '8deg',
        },
        to: {
          rotate: '360deg',
        },
      },
      empty: {
        from: {
          scale: 1,
        },
        to: {
          scale: 0,
        },
      },
      incorrect: {
        from: {
          backgroundColor: '#ffb05b',
        },
        to: {
          backgroundColor: Colors.errorColor,
        },
      },
    };
  let animation = useMemo(() => {
      return !status ? 'rubberBand' : state[status];
    }, [status]),
    iterationCount = useMemo(() => {
      return !status ? 1 : 'infinite';
    }, [status]);

  return (
    <ImageBackground {...avatar}>
      <Animatable.View
        animation={animation}
        iterationCount={iterationCount}
        style={{
          ...pos,
          backgroundColor: Colors.colorTextBase,
        }}
      />
    </ImageBackground>
  );
};

export default Logo;
